<template>
  <div class="login-container">
    <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="login-form">
      <h2>会员管理系统</h2>
      <el-form-item label="账号" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input v-model="form.password" type="password"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
//导入
import { login, getUserInfo } from "../../api/login";

export default {
  data() {
    return {
      form: {
        username: "",
        password: ""
      },
      rules: {
        username: [
          { required: true, message: "账号不能为空", trigger: "blur" }
        ],
        password: [{ required: true, message: "密码不能为空", trigger: "blur" }]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        // console.log(valid);
        if (valid) {
          // //把表单提交给后台进行验证
          // login(this.form.username, this.form.password).then(response => {
          //   console.log(response.data);

          //   const resData = response.data;
          //   //如果验证成功
          //   if (resData.flag) {
          //     getUserInfo(resData.data.token).then(response => {
          //       //获取用户信息
          //       const userMsg = response.data;
          //       //如果用户信息获取成功
          //       if (userMsg.flag) {
          //         console.log("userifno", userMsg.data);

          //         // 保存用户信息,token
          //         localStorage.setItem( "x-msm-user",JSON.stringify(userMsg.data));
          //         localStorage.setItem("x-msm-token", resData.data.token);
          //         // 前往首页
          //         this.$router.push("/");
          //       } else {
          //         this.$message({
          //           message: userMsg.message,
          //           type: "warning"
          //         });
          //       }
          //     });
          //     //用户验证失败
          //   } else {
          //     //弹出警告
          //     // alert(resData.message);
          //     this.$message({
          //       message: resData.message,
          //       type: "warning"
          //     });
          //   }
          // });  
          this.$store.dispatch('Login',this.form).then(res=>{
            const resData=res
            const token=resData.data.token
            // 验证通过 
            if(resData.flag) {
            
              this.$router.push('/')
            }else{
              this.$message({
                message:resData.message,
                type:'warning'
              })
            }
          })
        } else {
          console.log("验证失败");
          return false;
        }
      });
    }
  }
};
</script>

<style scoped>
.login-form {
  text-align: center;
  color: #333;
  width: 350px;
  /* height: 300px; */
  margin: 160px auto;
  background-color: rgb(255, 255, 255, 0.8);
  padding: 10px 60px 10px 0;
  border-radius: 20px;
}
.login-container {
  position: absolute;
  width: 100%;
  height: 100%;
  background: transparent url("../../assets/login.jpg");

}
</style>